<template>
	<view class="editRoot">
		<navBar isBack backColor="#333" title="权限编辑" color="#333"></navBar>
		<view class="rootBox">
			<view class="bigBox">
				<h3>{{name}}</h3>
				<view class="title">
					企业微信：
					<view class="item" :class="{'active':root_sw1}">
						企业微信
						<u-switch size="40" active-color="#E3BA71" @change="selectQyFn" v-model="qyStatus"></u-switch>
					</view>
				</view>
				<view class="title" v-for="(item,index) in rootList" :key="index">
					{{item.type}}：
					<view class="item" :class="{'active':root_sw1}" v-for="(item1,index1) in item.role" :key="index1">
						{{item1.name}}
						<u-switch size="40" active-color="#E3BA71"  v-model="item1.status"></u-switch>
					</view>
				</view>
			</view>
			<view class="positBox">
				<image :src="headImg" mode=""></image>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSave">保存</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				staff_user_id:null,
				rootList:[],
				name:'',
				headImg:'',
				firstList:[],
				qyStatus:true,
				qyUserId:'',//企微user_id
			}
		},
		onLoad(options) {
			this.qyStatus = options.qyUserId?true:false;
			this.qyUserId = options.qyUserId
			this.staff_user_id = options.staff_user_id
			this.name = options.name
			this.headImg = options.headImg
			console.log(options)
			this.getStaffInfo()
		},
		
		methods:{
			// 获取员工权限信息
			getStaffInfo(){
				uni.showLoading({
					title:'加载中...'
				})
				this.$api.getStaffInfo({staff_user_id:this.staff_user_id}).then(res=>{
					console.log(res,'员工权限信息')
					if(res.code==1){
						this.firstList = res.data?JSON.parse(JSON.stringify(res.data)):[]
						
						this.rootList = res.data?res.data:[],
						this.rootList.map(item=>{
							item.role.map(item1=>{
								item1.status = item1.status==1?true:false
							})
						})
					}
				})
				uni.hideLoading()
			},
			
			// 开启或关闭企业微信权限
			selectQyFn(){
				// 当前是企业微信，移除操作
				if(!this.qyStatus){
					uni.showModal({
						content:'确定要移除该员工企业微信吗？',
						success:res=>{
							if(res.confirm){
								this.$api.removeQyStaff({choose_id:this.staff_user_id,qy_user_id:this.qyUserId}).then(res=>{
									console.log(res,'移除企业微信结果')
									if(res.code==1){
										uni.showToast({
											title:'已移除该员工企业微信',
											icon:'success'
										})
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}else{
								this.qyStatus = true
							}
						},
					})
				}else{ //当前不是企业微信，注册操作
					this.$api.setQyStaff({choose_id:this.staff_user_id}).then(res=>{
						console.log(res,'注册企业微信结果')
						if(res.code==1){
							uni.showToast({
								title:'注册企业微信成功',
								icon:'success'
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},500)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
			},
			
			// // 按钮
			// changeRoot(type,index,index1){
			// 	if(type=='导购'&&index1==0){
			// 		if(this.rootList[index].role[0]){
			// 			this.rootList[index].role[1].status=false
			// 		}else{
			// 			this.rootList[index].role[1].status=true
			// 		}
			// 	}
			// },
			// 点击授权与否
			toSave(){
				let arr = []
				this.firstList.map(item=>{
					item.role.map(item1=>{
						let obj = {
							id:item1.role_id,
							status:item1.status
						}
						// arr[item1.role_id] = item1.status
						arr.push(obj)
					})
				})
				console.log(arr,'111111')
				
				let arr2 = []
				this.rootList.map(item=>{
					item.role.map(item1=>{
						item1.status = item1.status?1:0
						let obj2 = {
							id:item1.role_id,
							status:item1.status
						}
						// arr2[item1.role_id] = item1.status
						arr2.push(obj2)
					})
				})
				console.log(arr2,'222222')
				
				let newId = []
				let oldId = []
				arr2.map((item,index)=>{
					if(item.status>arr[index].status){
						newId.push(item.id)
					}else if(item.status<arr[index].status){
						oldId.push(item.id)
					}
				})
				console.log(newId,oldId,'0000000000')
				
				let params = {
					staff_user_id:this.staff_user_id,
					add_roles:newId.join(','),
					del_roles:oldId.join(',')
				}
				this.$api.editStaffRoot(params).then(res=>{
					console.log(res,'授权结果')
					if(res.code==1){
						this.getStaffInfo()
						uni.showToast({
							title:'操作成功',
							icon:'success'
						})
					}else{
						if(res.msg=='没有改变'){
							console.log(res.msg)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.editRoot{
		padding: 0 24rpx;
		.rootBox{
			margin:126rpx auto 136rpx;
			position: relative;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.bigBox{
				padding: 86rpx 0 8rpx 0;
				width: 702rpx;
				background-color: #fff;
				border-radius: 16rpx;
				font: 400 26rpx/40rpx PingFang SC;
				h3{text-align: center;font: 600 28rpx/48rpx PingFang SC;color: #333;margin-bottom: 10rpx;}
				.title{
					padding-top: 30rpx;
					padding-left: 10rpx;
					font: 500 28rpx/40rpx PingFang SC;
					color: #333;
				}
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #A0A0A0;
					padding: 32rpx 24rpx 32rpx 28rpx;
					border-bottom: 2rpx solid #f5f5f5;
				}
				.active{
					color: #333333;
				}
			}
			
			.positBox{
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -86rpx;
				left: 50%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				transform: translateX(-50%);
				image{
					width: 118rpx;
					height: 118rpx;
					border-radius: 50%;
					border: 2rpx solid #EFB82F;
				}
			}
		}
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			z-index: 10;
			bottom: 0;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				height: 80rpx;
				border-radius: 46rpx;
				margin: 20rpx auto;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 3px 6px rgba(219, 169, 84, 0.3);
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
		
	}
</style>
